<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <title>密码管理</title>
    <link rel="icon" href="">
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <style type="text/css">
    	table{
    		display: block;
    		height: 260px;
    		overflow-y: auto;
    	}

    	.form-group,.form-control{
    		display: inline-block;
    		width: auto;
    	}

    	.remark-cell{
    		cursor: text;
    	}
    </style>
  </head>
  <body>
  	<table class="table table-striped">
    	<thead>
    		<tr>
    			<th style="width: 5%;">#</th>
    			<th style="width: 10%;">账户</th>
    			<th style="width: 5%;">密码</th>
    			<th style="width: 10%;">备注</th>
    			<th style="width: 10%;">操作</th>
    		</tr>
    	</thead>
    	<tbody id="account_list">
    		
    	</tbody>
    </table>
    <form class="form-inline navbar-fixed-bottom">
	  <div class="form-group">
	    <label>账户</label>
	    <input id="accountInput" type="text" class="form-control" />
	  </div>
	  <div class="form-group">
	    <label>密码</label>
	    <input id="passwordInput" type="password" class="form-control" />
	  </div>
	  <button id="addAcountBtn" type="button" class="btn btn-default">添加</button>
	</form>

	<script id="account-list" type="text/html">
  		{{each data item index}}
  			<tr class="account-row" data-index="{{index}}" draggable="true">
  				<td>{{index+1}}</td>
  				<td class="account-cell" data-account="{{item.account}}">{{item.account|accountFormat}}</td>
  				<td>
  				{{item.password|passwordFormat}}
  				<textarea class="hide-password" style="width:0;height:0;resize: none;border: none;margin: 0;padding: 0.1px;">{{item.password}}</textarea>
  			 	</td>
  			 	<td class="remark-cell">
  			 		<span class="viewer">{{item.remark}}</span>
  			 		<input class="editor" type="text" value="{{item.remark}}" style="display: none;" />
  			 	</td>
  				<td><a href="#" class="copyPasswordLink">复制密码</a></td>
  			</tr>
		{{/each}}
  	</script>

    <script type="text/javascript" src="../../js/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/template-web.js"></script>
    <script type="text/javascript">

		document.addEventListener("copy", function(e){
			if($(e.srcElement).is('.account-cell')){
				e.preventDefault();
				e.clipboardData.setData("text", $(e.srcElement).data('account'));
			}
		});

		template.defaults.imports.accountFormat=function(val){
			var formatVal='';
			if(val){
				for(var i=0;i<val.length;i++){
					if(i<2||val.length-i<=2){
						formatVal+=val.charAt(i);
					}else{
						formatVal+='*';
					}
				}
			}
			return formatVal;
		};

    	template.defaults.imports.passwordFormat=function(val){
    		return '******';
    	};

		var getAccountList=function(){
			var accountList=localStorage.getItem('my-account-list');
			if(accountList==null||accountList==''){
				accountList=[];
			}else{
				accountList=$.parseJSON(accountList);
			}
			return accountList;
		};

		var renderAccountList=function(){
			$("#account_list").html(template("account-list",{data:getAccountList()}));
		};

		var setAccountList=function(accountList){
			localStorage.setItem('my-account-list',JSON.stringify(accountList));
		    renderAccountList();
		};

		renderAccountList();

		$("#addAcountBtn").click(function(){
			var account=$("#accountInput").val();
			var password=$("#passwordInput").val();
			var accountList=getAccountList();
			accountList.unshift({"account":account,"password":password});
			setAccountList(accountList);
			$(this).parents('form')[0].reset();
		});

		$('body').on('click','.copyPasswordLink',function(){
			$(this).parents('tr').find('textarea.hide-password')[0].select();
			document.execCommand('copy',false,null);

			var self=this;
			var copyText=$(self).text();
			$(self).text("已复制");
			setTimeout(function(){
				$(self).text(copyText);
			},500);
		});

		$("body").bind("dragover",function(e){
	        e.preventDefault();
	    });

		$("body").on("dragstart","tr.account-row",function(e){
	        var index=$(this).data('index');
	        e.originalEvent.dataTransfer.setData("index",index);
	    });

	    $("body").bind("drop",function(e){
	        if(!$(e.target).is("#account_list")&&
	            $(e.target).parents("#account_list").length==0){
	            
	            var index=e.originalEvent.dataTransfer.getData("index");
	            var newAccountList=[];
	            var accountList=getAccountList();
	            for(var i=0;i<accountList.length;i++){
	                if(i!=index){
	                    newAccountList.push(accountList[i]);
	                }
	            }

	            setAccountList(newAccountList);

	            e.preventDefault();
	        }
	    });

	    $('body').on('click',".remark-cell",function(){
	    	if(!$(this).find(".editor").is(":visible")){
	    		$(this).find(".viewer").hide();
	    		$(this).find(".editor").show();
	    		$(this).find(".editor").focus();
	    	}
	    });

	    $('body').on('change blur',".remark-cell .editor",function(){
	    	var index=$(this).parents('tr.account-row').data('index');
	    	var accountList=getAccountList();
            accountList[index].remark=$(this).val();
            setAccountList(accountList);
	    });

	    $('body').on('mouseover','#account_list td',function(){
	    	if($(this).is('.account-cell')){
	    		$(this).parents('tr').attr('draggable',false);
	    	}else{
	    		$(this).parents('tr').attr('draggable',true);
	    	}
	    });
    </script>
  </body>
</html>
